const carBox = document.querySelector(".box");

(function() {
    const data_id = Number(localStorage.getItem("data_id")) - 1;
    const commoditys = JSON.parse(localStorage.getItem("commoditys"))
    const userInfo = JSON.parse(localStorage.getItem("userInfo"))
    const currentUserName = localStorage.getItem("currentUser")
    
    let id = commoditys[data_id].id
    let image = commoditys[data_id].image
    let name = commoditys[data_id].name
    let price = commoditys[data_id].price
    let description = commoditys[data_id].description

    let img = document.createElement("img");
    let box = document.createElement("div");
    box.setAttribute("class", "show-box");
    box.innerHTML = `
        <img src="${image}" class="show-img">`
    img.src = image;
    let div = document.createElement("div");
    div.innerHTML = `
        <h1>${name}</h1>
        <h2>￥${price}</h2>
        <p>${description}</p>
        <button>加入购物车</button>
    `
    carBox.appendChild(img);
    carBox.appendChild(box);
    carBox.appendChild(div);

    carBox.addEventListener("click", function(e) {
        if(e.target.tagName === "BUTTON") {
            if (currentUserName === null) {
                alert("请先登录")
                return
            } else {
                const userIdx = userInfo.findIndex(item => item.username === currentUserName)
                const shopArr = userInfo[userIdx].shop || [];
                const existItem = shopArr.find(item => item[name]);
                if (existItem) {
                    existItem[name] += 1;
                } else {
                    shopArr.push({ [name]: 1 });
                }
                userInfo[userIdx].shop = shopArr;
                localStorage.setItem('userInfo', JSON.stringify(userInfo));
                num();
                alert("加入购物车成功")
            }
        }
    })
})();


// 放大镜
carBox.addEventListener("mouseover", function(e) {
    if(e.target.nodeName === "IMG") {
        let showBox = e.target.parentNode.children[1];
        let showImg = e.target.parentNode.children[1].children[0];
        showBox.style.display = "block";

        e.target.addEventListener("mousemove", e =>{
            let x = (e.clientX - e.target.offsetLeft) / (showImg.offsetWidth / 2)
            let y = (e.clientY - e.target.offsetTop) / (showImg.offsetHeight / 2)
            x = Math.max(0, Math.min(1, x));
            y = Math.max(0, Math.min(1, y));
            const offsetX = (x * showImg.offsetWidth) - (showBox.offsetWidth / 2);
            const offsetY = (y * showImg.offsetHeight) - (showBox.offsetHeight / 2);
            let X = offsetX < 0 ? 0 : (offsetX > showImg.offsetWidth - showBox.offsetWidth? showImg.offsetWidth - showBox.offsetWidth : offsetX)
            let Y = offsetY < 0 ? 0 : (offsetY > showImg.offsetHeight - showBox.offsetHeight? showImg.offsetHeight - showBox.offsetHeight : offsetY)
            showImg.style.left = -X + "px";
            showImg.style.top = -Y + "px";
        })
    }
})
carBox.addEventListener("mouseout", function(e) {
    if(e.target.nodeName === "IMG") {
        let showBox = e.target.parentNode.children[1];
        showBox.style.display = "none";
    }
})

// 购物车数量
function num() {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"))
    const currentUserName = localStorage.getItem("currentUser")
    const span = document.querySelector('.top:nth-child(3) span');
    const userIdx = userInfo.findIndex(u => u.username === currentUserName);
    const shopArr = userInfo[userIdx].shop;
    let arr = [];
    shopArr.forEach(n => {
        for (let key in n) {
            let value = n[key];
            arr.push(value);
        }
    })
    number = arr.reduce((acc, cur) => acc + cur, 0)
    if (number) {
        span.style.display = "inline-block";
        span.innerText = `${number}`;
    } else {
        span.style.display = "none";
    }
};
num();